<template>
	<view v-if="orderDetail" class="wrapper">
		<view v-for="(item,index) in orderDetail.goodsList" :key="index" class="goods">
			<image :src="imgUrl+item.goods_image+'?'+num" mode="aspectFit"></image>
			<view class="goods-r">
				<view class="goods-r-tit">
					{{item.goods_name}}
				</view>
				<view class="goods-r-sku">
					{{item.goods_model?item.goods_model:'默认规格'}}
				</view>
			</view>
		</view>
		<view v-if="afterData" class="detail-box">
			<!-- <view class="detail-li border-bot">
				<view class="detail-li-l">
					说明：
				</view>
				<view class="detail-li-r">
					{{afterData.remark}}
				</view>
			</view> -->
			<view class="detail-li border-bot">
				<view class="detail-li-l">
					申请类型：
				</view>
				<view class="detail-li-r">
					{{afterData.type}}
				</view>
			</view>
			<view class="detail-li border-bot">
				<view class="detail-li-l">
					申请原因：
				</view>
				<view class="detail-li-r">
					{{afterData.reason}}
				</view>
			</view>
			<view class="detail-li border-bot">
				<view class="detail-li-l">
					申请说明：
				</view>
				<view class="detail-li-r">
					{{afterData.remark}}
				</view>
			</view>
			<block v-if="afterData.images">
				<view  class="detail-li padd-bot-no">
					<view class="detail-li-l ">
						图片：
					</view>
				</view>
				<view class="img-box">
					<image v-for="(item,index) in afterData.images" :key="index" :class="Number(index+1)%2==0?'padd-r':''" :src="item" mode="aspectFill"></image>
				</view>
			</block>
			<view v-if="afterData.status==1" class="order-btn-box">
				<view @click="rejectBtnPop" class="order-btn-border">
					拒绝
				</view>
				<view @click="rejectBtn(2)" class="order-btn">
					同意
				</view>
			</view>
		</view>
		<view v-if="isReject" class="reject-box">
			<view class="reject">
				<view class="reject-tit">
					拒绝原因
				</view>
				<view class="reject-text">
					<textarea v-model="reason" placeholder="请输入拒绝原因" />
				</view>
				<view @click="rejectBtn(4)" class="reject-btn">
					确定
				</view>
			</view>
		</view>
		
		
		
		<!-- 提示窗 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail:null,//订单数据
				imgUrl:'',
				num:Math.random(),
				id:0,
				imgList:[2,2,3,4],
				afterData:null,
				reason:'',//拒绝原因
				isReject:false
			}
		},
		onLoad(e) {
			// this.id = e.id
			// this.id = 9
			this.orderDetail=JSON.parse(decodeURIComponent(e.item))
		},
		onShow(){
			this.imgUrl = this.api.imgUrl
			this.getAfterData()
		},
		methods: {
			// 获取售后详情
			getAfterData(){
				this.api._post('Order/getRefundDetails',{
					order_id:this.orderDetail.order_id
				}).then(res=>{
					this.afterData= res.data
				})
			},
			showPicker(){
				this.show = true
			},
			confirmBtn(e){
				console.log(e[0])
				this.pickerText =this.selector[e[0]]
			},
			rejectBtn(type){
				this.isReject = false
				this.api._post('Order/Refusaltorefund',{
					order_id:this.orderDetail.order_id,
					aftersaleexpress_type:this.orderDetail.aftersaleexpress_type,
					type:type,
					reason:this.reason
				}).then(res=>{
					console.log(res)
					if(res.status==200){
						this.$refs.uToast.show({
							title:res.message,
							type: 'success'
						})
						let setT = setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
							clearTimeout(setT)
						},1000)
					}else{
						this.$refs.uToast.show({
							title:res.message,
							type: 'error'
						})
					}
				})
			},
			rejectBtnPop(){
				this.isReject = true
			}
		},
	}
</script>

<style scoped lang="scss">
	@import url('../../common/common.css');
	.wrapper {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 100%;
		padding-bottom: 150upx;
		box-sizing: border-box;
	}
	page {
		background: #f7f7f7;
	}
	.goods{
		margin-top: 20upx;
		width: 100%;
		padding: 32upx 40upx;
		box-sizing: border-box;
		background:rgba(255,255,255,1);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		>image{
			width:201upx;
			height:160upx;
			background:rgba(240,240,240,1);
			border-radius:6upx;
		}
		.goods-r{
			margin-left: 30upx;
			width: 443upx;
			height: 160upx;
			display: flex;
			justify-content: space-around;
			align-items: flex-start;
			flex-direction: column;
			.goods-r-tit{
				width: 100%;
				height:80upx;
				font-size:30upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(0,0,0,1);
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.goods-r-sku{
				font-size:26upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(0,0,0,1);
			}
		}
	}
	.logistics-box{
		width: 100%;
		background: #FFFFFF;
		padding: 32upx 20upx;
		box-sizing: border-box;
		margin-top: 20upx;
		.logistic,.logistic-t{
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1upx solid #EEEEEE;
			padding: 30upx 0;
			>image{
				width: 48upx;
				height: 38upx;
			}
			.logistic-tit{
				margin-left: 18upx;
				font-size:30upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.logistic-picker{
				margin-left: 42upx;
				width:460upx;
				height:80upx;
				background:rgba(247,248,250,1);
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30upx;
				box-sizing: border-box;
				.logistic-picker-text{
					font-size:30upx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(153,153,153,1);
				}
				>image{
					width: 24upx;
					height: 12upx;
				}
				>input{
					width: 90%;
					font-size:30upx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(153,153,153,1);
				}
			}
		}
		.logistic-t{
			>image{
				width: 38upx;
				height: 40upx;
				margin-right: 8upx;
			}
		}
	}
	.detail-box{
		margin-top: 20upx;
		width: 100%;
	}
	.detail-li{
		width: 100%;
		padding: 32upx 40upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		// border-bottom: 1upx solid #EEEEEE;
		.detail-li-l{
			font-size:28upx;
			font-family:PingFangSC;
			font-weight:400;
			color:rgba(51,51,51,1);
		}
		.detail-li-r{
			width: 65%;
			text-align: right;
			font-size:28upx;
			font-family:PingFangSC;
			font-weight:500;
			color:rgba(51,51,51,1);
		}
		
		.red-text{
			color: #F70000;
		}
	}
	.border-bot{
		border-bottom: 1upx solid #EEEEEE;
	}
	.padd-bot-no{
		padding-bottom: 0;
	}
	.img-box{
		width: 100%;
		background: #FFFFFF;
		padding: 32upx 40upx;
		box-sizing:border-box;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		>image{
			width:320upx;
			height:200upx;
			border-radius:6upx;
			margin-bottom:30upx;
		}
		.padd-r{
			padding-left: 30upx;
		}
	}
	.order-btn-box{
		width: 100%;
		height: 150upx;
		bottom: 0;
		background: #FFFFFF;
		position: fixed;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.order-btn{
		width:250upx;
		height:80upx;
		background:rgba(247,0,0,1);
		box-shadow:0px 2upx 24upx 0px rgba(251,88,88,1);
		border-radius:40upx;
		text-align: center;
		line-height: 80upx;
		font-size:34upx;
		font-family:PingFangSC;
		font-weight:400;
		color:rgba(255,255,255,1);
	}
	.order-btn-border{
		width:250upx;
		height:80upx;
		border:1upx solid rgba(247,0,0,1);
		border-radius:40upx;
		text-align: center;
		line-height: 80upx;
		font-size:34upx;
		font-family:PingFangSC;
		font-weight:400;
		color:rgba(251,88,88,1);
	}
	
	.reject-box{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: fixed;
		background-color: rgba(0,0,0,.3);
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		.reject{
			width: 80%;
			background: #FFFFFF;
			border-radius: 20rpx;
			.reject-tit{
				margin: 20rpx auto;
				text-align: center;
				color: #333333;
				font-size: 34rpx;
				font-weight: 700;
			}
			.reject-text{
				width: 80%;
				margin: 20rpx auto;
				height: 200rpx;
				>textarea{
					width: 100%;
					height: 200rpx;
					padding: 20rpx;
					box-sizing: border-box;
					background: #F7F7F7;
					color: #333333;
					font-size: 30rpx;
				}
			}
			.reject-btn{
				margin:  30rpx auto;
				width: 150rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				background: #EB0909;
				border-radius: 30rpx;
			}
		}
	}
</style>
